<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>个人首页</title>
    <style>
        .portal {
            margin: 5px 5px;
            line-height: 45px;
            background-color: rgb(191, 202, 230);
            text-align: center;
            cursor: pointer;
        }

        .select {
            margin: 5px 5px;
            line-height: 45px;
            background-color: #2f97af;
            text-align: center;
            cursor: pointer;
        }

        .item-star {
            left: 12px !important;
        }

        .item-sender {
            left: 34px !important;
            width: 70% !important;
            cursor: pointer;
        }

        .item-sender a:visited {
            color: #999 !important;
        }

        .item-sender a {
            max-width: 100%;
        }

        .item-sender a > img {
            position: absolute;
            top: 14px;
            right: 0px;
        }

        .item-sender a > img:last-child {
            right: 40px;
        }

        .item-sender a > img:first-child {
            right: 0px;
        }

        .item-time {
            width: 30% !important;
            padding-right: 0px !important;
            color: #a9a9a9;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row" style="position: relative;">
        <div style="margin: 10px 30px 15px 15px; border-top-color: rgb(255, 255, 255); border-bottom-color: rgb(200, 200, 200); border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid;">
        </div>
        <div title="缩小工具栏" class="glyphicon themeprimary fa  fa-gear" id="toolbar-collapse"
             style="position: absolute;top: 0px;right: 15px ;line-height: 30px;cursor: pointer;"></div>
    </div>
    <div class="row" id="portal">

    </div>
</div>
<div class="modal fade in" id="portaledit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width: 750px;">
        <div class="modal-content">
            <div class="widget no-padding">
                <div class="widget-header bg-themeprimary">
                    <i class="widget-icon fa fa-user"></i>
                    <span class="widget-caption">门户设置</span>
                    <div class="widget-buttons">
                        <a data-dismiss="modal">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="widget-body">
                    <div class="row" id="selectPortal">

                    </div>
                    <div class="row" style="margin-top: 5px;">
                        <div class="col-sm-offset-8 col-sm-4" style="text-align: right">
                            <a class="btn btn-success" href="#" id="btn_Save_1"><i class="fa fa-check right"></i>保存</a>
                            <a class="btn btn-danger" href="#" data-dismiss="modal"><i
                                    class="fa fa-times right"></i>关闭</a>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<div id="divTemplate" style="display: none;">
    <div ondragover="allowDrop(event,this)" ondrop="drop(event,this)"
         draggable="true" ondragstart="drag(event,this)">
        <div class="widget">
            <div class="widget-header">
                <i class="widget-icon fa fa-arrow-down"></i>
                <span class="widget-caption"></span>
                <div class="widget-buttons">
                    <a href="#" data-toggle="maximize">
                        <i class="fa fa-expand"></i>
                    </a>
                    <a href="#" data-toggle="collapse">
                        <i class="fa fa-minus"></i>
                    </a>
                    <a href="#" data-toggle="dispose">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="widget-body mail-container normal-height" style="min-height:280px">
                <div class="mail-body" style="margin-left: 5px;">
                    <ul class="mail-list" style="padding-right: 10px; padding-left: 10px;">

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="portal">
        </div>
    </div>
    <li class="list-item">
        <div class="item-star"></div>
        <div class="item-sender"><a target="_blank"></a></div>
        <div class="item-time">[2016-11-14]</div>
    </li>
</div>
<script>
    var homeObj = {
        currentObj: null,
        portalDiv: $($("#divTemplate").children("div").get(0)).clone(),
        selectDiv: $($("#divTemplate").children("div").get(1)).clone(),
        newsli: $($("#divTemplate").children("li").get(0)).clone(),
        myPortal: []
    }
    function allowDrop(ev, div) {
        ev.preventDefault();
    }
    function drag(ev, div) {
        homeObj.currentObj = div;
    }
    function drop(ev, div) {
        ev.preventDefault();
        $(div).after(homeObj.currentObj);
        savePortal();
    }
    function initButtons() {
        $("#toolbar-collapse").click(function () {
            $("#portaledit").modal('show');
            $.request("/admin/sys/portal/query/all", {}, function (result) {
                $("#selectPortal").empty();
                if (result) {
                    $.each(result, function (k, v) {
                        var div = homeObj.selectDiv.clone();
                        var child = div.children();
                        child.html(v.portalName).click(function () {
                            var obj = {"id": v.id, isfind: false};
                            $("#portal").children().each(function () {
                                $(this).trigger("remove", obj)
                            });
                            if (obj.isfind) {
                                child.removeClass("select");
                                return;
                            }
                            child.addClass("select");
                            debugger;
                            addPortal({"id": v.id, module: v.module, columnNum: 0, "datasource": v.datasource});
                        });
                        $.each(homeObj.myPortal, function (i, w) {
                            if (v.id == w.id) {
                                child.addClass("select");
                            }
                        })
                        $("#selectPortal").append(div);
                    })
                }
            });
        });
        $("#btn_Save_1").click(function () {
            savePortal();
        });
    }
    function savePortal() {
        var obj = {list: []};
        $("#portal").children().each(function () {
            $(this).trigger("save", obj)
        });
        $.request("/admin/sys/portal/user/save", obj.list, function (result) {
            $("#portaledit").modal('hide');
            loadhome();
        });
    }
    var style = "col-lg-{0} col-sm-{0} col-md-{0} col-xs-12", size = [4, 6, 8, 12];
    function loadhome() {
        $.request("/admin/sys/portal/query/userId", {}, function (result) {
            homeObj.myPortal = result;
            $("#portal").empty();
            $.each(result, function (i, v) {
                addPortal(v);
            })
        });
    }
    function addPortal(v) {
        var div = homeObj.portalDiv.clone();
        if (v.columnNum >= 4) v.columnNum = 0;
        $(".widget .widget-header span", div).html(v.portalName);
        div.addClass($.format(style, size[v.columnNum])).on("reset", function () {
            ++v.columnNum;
            if (v.columnNum >= 4)
                v.columnNum = 0;
            div.attr("class", $.format(style, size[v.columnNum]));
        }).on("save", function (e, obj) {
            obj.list.push({"portalId": v.id, columnNum: v.columnNum, sort: div.index()});
        }).on("remove", function (e, obj) {
            if (obj.id == v.id) {
                obj.isfind = true;
                $(this).remove();
            }
        }).on("init", function (e, obj) {
                obj.module = v.module;
                var $this = $(this);
                if (v.datasource == 0) {
                    $.request("/admin/sys/news/query/page", {
                            "module": obj.module, page: {
                                SortBy: "SEND_TIME",
                                SortOrder: "DESC",
                                pageIndex: 0,
                                pageSize: 10,
                                token: context.token
                            }
                        },
                        function (result) {
                            if (result.list) {
                                $.each(result.list, function (k, v) {
                                    var li = homeObj.newsli.clone();
                                    $(li).find("a").html(v.title).attr("href", v.href);
                                    $(".item-time", $(li)).html(moment(v.sendTime).formatUTC("YYYY-MM-DD HH:mm"));
                                    $("ul", $this).append(li);
                                });
                            }
                        }
                    )
                } else if (v.datasource == 1) {
                    $.request("/cms/article/query/view/page", {
                            "categoryId": obj.module, page: {
                                SortBy: "AUDIT_TIME",
                                SortOrder: "DESC",
                                pageIndex: 0,
                                pageSize: 10,
                                token: context.token
                            }
                        },
                        function (result) {
                            if (result.list) {
                                $.each(result.list, function (k, v) {
                                    var li = homeObj.newsli.clone();
                                    $(li).find("a").html(v.title).attr("href", "/views/cms/info/"+v.id+".html");
                                    $(".item-time", $(li)).html(moment(v.auditTime).formatUTC("YYYY-MM-DD HH:mm"));
                                    $("ul", $this).append(li);
                                });
                            }
                        }
                    )
                } else if (v.datasource == 2) {
                    $.request("/workflow/workitem/todo", {
                            'userId': $.cookie(app.name + "_userId"), 'page': {
                                SortBy: "startTime",
                                SortOrder: "DESC",
                                pageIndex: 0,
                                pageSize: 10,
                                token: context.token
                            }
                        },
                        function (result) {
                            if (result.list) {
                                $.each(result.list, function (k, v) {
                                    var li = homeObj.newsli.clone();
                                    $(li).find("a").html(v.instanceName).click(function () {
                                        var parm = {
                                            id: v.id,
                                            activityId: v.activityId,
                                            instanceId: v.instanceId,
                                            templateId: v.templateId
                                        }
                                        util.openUrl("/views/workflow/wfprove.html?P=" + encodeURIComponent($.toJSON(parm)));
                                    });
                                    $(".item-time", $(li)).html(moment(v.startTime).formatUTC("YYYY-MM-DD HH:mm"));
                                    $("ul", $this).append(li);
                                });
                            }
                        }
                    )
                }
            }
        );
        var obj = {};
        $(div).trigger("init", obj)
        $("#portal").append(div);
        $('.widget-buttons *[data-toggle="maximize"]', div).on("click", function (event) {
            event.preventDefault();
            var div = $(this).parents(".widget").parent();
            var button = $(this).find("i").eq(0);
            div.trigger("reset");
            v.columnNum == 3 ? button.attr("class", "fa fa-compress") : button.attr("class", "fa fa-expand");
        });
    }
    function init() {
        initButtons();
        loadhome();
    }
    function dispose() {
    }
</script>
</body>
</html>
